<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>06_Object_defineproperty方法</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
       
        </div>

        <script type="text/javascript">
            
            let num1 = 20
           let person = {
            // num:num1, 不能直接写
            name:'张三',
            sex:'男',
            // age:'17' //1
           }

           console.log('测试age===============================')
        //2.三个参数：1-给哪个对象添加属性，2-属性名，3-配置项（有很多，常用的是value）
        //注意：这种方式添加的属性是不可被枚举的，不参与遍历
           Object.defineProperty(person,'age',{
            value:18,
            enumerable:true, //控制属性是否可以枚举，默认值是false，但是不能被修改
            writable:true, //控制属性是否可以被修改，默认值是false
            configurable:true //控制属性是否可以被删除，默认值是false
           })
           //修改属性值
           person.age = 19
           //打印person
           console.log(person)
           //测试遍历,传入一个对象，可以把传入对象的所有属性名作为一个数组，使用2是拿不到age这个参数的
           console.log(Object.keys(person))
           //测试遍历对象
           for (const key in person) {
            console.log('key:'+key)
            console.log('value:'+person[key])//打印每个属性的属性值
           }

           console.log('测试num===============================')
           //当person中有一个属性num是读取的变量1，如果要在修改num1的时候，person中的num也同步修改，需要借助get函数
           //当配置了get和set函数，就不能再设置value和writable这两个配置项了，被get和set代理了
           Object.defineProperty(person,'num',{
            configurable:true,//控制属性是否可以被删除，默认值是false
            //相当于每次访问person的num属性时，都会通过get(getter)方法去找当前num1的值
            get:function(){
                console.log('访问get函数了')
                return num1
            },
            //当有人修改person的num属性时，set(setter)函数就会被调用，且会收到具体的修改值
            set(value){
                console.log('有人修改了num属性，值是：'+value)
            }
           }),
           
           console.log(person)
           //测试遍历对象
           for (const key in person) {
            console.log('key:'+key)
            console.log('value:'+person[key])//打印每个属性的属性值
           }
        </script>

        
    </body>
</html>